﻿
:root {
    --fontcolor: #96A0B2;
}

.Body {
    width: 100%;
    padding: 10px;
    overflow: auto;
    background-color: #F5F7FB;
    margin: 0px;
    height: 100%;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    min-width: 1400px;
}

.Content {
    width: 100%;
    border-radius: 3px;
    min-height: 100%;
}

    .Content .title {
        width: 100%;
        height: 50px;
        background-color: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

        .Content .title .left {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 20px;
            color: var(--fontcolor);
        
        }

            .Content .title .left span {
                font-weight: bold;
                margin: 10px;
            }

            .Content .title .left a {
                color: var(--fontcolor);
            }

.Table_Info {
    width: 100%;
    height: 100px;
    background-color: #fff;
    margin-top: 10px;
}

    .Table_Info .Top {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
        color: var(--fontcolor);
    }

    .Table_Info .Bottom {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

        .Table_Info .Bottom .left {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 20px;
            color: var(--fontcolor);
        }

            .Table_Info .Bottom .left span {
                margin: 10px;
            }

        .Table_Info .Bottom .center {
            width: 70%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 10px;
        }

        .Table_Info .Bottom .center {
            color: var(--fontcolor);
            font-weight: bold;
        }

            .Table_Info .Bottom .center span {
                margin: 10px;
            }

.Table {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    min-height: 600px;
}

    .Table .Tabletype {
        width: 250px;
        background-color: #fff;
        min-height: 100%;
    }

        .Table .Tabletype .Name {
            color: var(--fontcolor);
            width: 100%;
            height: 50px;
            padding-left: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .Table .Tabletype .Name .AddType {
                height: 50px;
                color: var(--fontcolor);
                width: 50px;
                justify-content: center;
                align-items: center;
                display: flex;
            }

                .Table .Tabletype .Name .AddType i {
                    font-size: 20px;
                    cursor: pointer;
                    transition: 0.3s;
                }

                .Table .Tabletype .Name .AddType:hover i {
                    color: var(--ZhuTiSe);
                }


        .Table .Tabletype .Types {
            width: 100%;
            min-height: 100%;
        }




            .Table .Tabletype .Types .option {
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                color: var(--fontcolor);
                padding-left: 20px;
                cursor: pointer;
                position: relative;
                transition:0.2s;
            }

                .Table .Tabletype .Types .option .name {
                    width: calc(100% - 40px);
                    height: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }
                .Table .Tabletype .Types .option .Control {
                    width:40px;
                    height:100%;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    position:relative;

                }
                    .Table .Tabletype .Types .option .Control .TypeMenu {
                        width: 80px;
                      
                        overflow: hidden;
                        background-color: #fff;
                        border-radius: 3px;
                        position: absolute;
                        right: -200%;
                        top: 0%;
                        transition: 0.3s;
                        opacity: 0;
                        transform: translateX(-20px) scale(0);
                    }
                    .Table .Tabletype .Types .option .Control:hover .TypeMenu {
                        border: 1px solid #e5e9ef;
                        height: auto;
                        opacity: 1;
                        transform: translateX(0px) scale(1);
                        box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
                    }


                    .Table .Tabletype .Types .option .Control .TypeMenu .CaiDan {
                        width: 100%;
                        height: 40px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 0;
                        outline: 0;
                        color: var(--fontcolor);
                        background: #fff;
                        cursor: pointer;
                    }
                        .Table .Tabletype .Types .option .Control .TypeMenu .CaiDan:hover {
                            background-color: #FEECED;
                            color: var(--ZhuTiSe);
                        }


                        .Table .Tabletype .Types .option:hover {
                            background-color: #dbdbdb14;
                        }

                .Table .Tabletype .Types .option:after {
                    content: '';
                    width: 5px;
                    height: 100%;
                    background: var(--ZhuTiSe);
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    opacity: 0;
                    border-radius: 0px 10px 10px 0px;
                }

                .Table .Tabletype .Types .option.active {
                    background-color: #FEECED;
                    color: var(--ZhuTiSe);
                }

                    .Table .Tabletype .Types .option.active:after {
                        opacity: 1;
                    }

    .Table .Tables {
        width: calc(99% - 250px);
        min-height: 600px;
    }

        .Table .Tables .Name {
            width: 100%;
            height: 50px;
            background-color: #fff;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

            .Table .Tables .Name .left {
                width: calc(100%);
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
         
             
                .Table .Tables .Name .left .tablttitle {
                    width: 100px;
                    color: var(--fontcolor);
                   
                    padding-left: 20px;
                }

        .Table .Tables .TableBox {
            width: 100%;
            min-height: 550px;
           
        }

            .Table .Tables .TableBox .table_option {
                width: 24%;
                height: 180px;
                background: #fff;
                float: left;
                border-radius: 3px;
                margin-top: 10px;
                color: var(--fontcolor);
                float:left;
                margin-right:1%;
            }

                .Table .Tables .TableBox .table_option .top {
                    width: 100%;
                    height: 140px;
                }

                    .Table .Tables .TableBox .table_option .top .Ttitle {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                    }

                        .Table .Tables .TableBox .table_option .top .Ttitle .Tname {
                            width: calc(100% - 40px);
                            height: 40px;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            padding-left: 20px;
                            font-size: 18px;
                        }

                        .Table .Tables .TableBox .table_option .top .Ttitle .more {
                            height: 40px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 40px;
                            position: relative;
                            cursor: pointer;
                        }




                            .Table .Tables .TableBox .table_option .top .Ttitle .more .Menu {
                                width: 80px;
                                height:0px;
                                overflow:hidden;
                                background-color: #fff;                              
                                border-radius: 3px;
                                position: absolute;
                                right: -0%;
                                top: 100%;
                                transition:0.3s;
                                opacity:0;
                                transform:translateY(-20px);
                            }
                            .Table .Tables .TableBox .table_option .top .Ttitle .more:hover .Menu {
                                border: 1px solid #e5e9ef;
                                height: auto;
                                opacity: 1;
                                transform: translateY(0px);
                           
                                box-shadow: 0 2px 4px rgb(0 0 0 / 14%);
                            }
                            .Table .Tables .TableBox .table_option .top .Ttitle .more .Menu .option {
                                width: 100%;
                                height: 40px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border: 0;
                                outline: 0;
                                color: var(--fontcolor);
                                background: #fff;
                                cursor: pointer;
                            }
                              


                                .Table .Tables .TableBox .table_option .top .Ttitle .more .Menu .option:hover {
                                    background-color: #FEECED;
                                    color: var(--ZhuTiSe);
                                }
                                .Table .Tables .TableBox .table_option .top .Ttitle .more .Menu .option:disabled {
                                    background-color:#00000005;
                                    color:#96A0B2;
                                    cursor:no-drop;
                                }

                            .Table .Tables .TableBox .table_option .top .Ttitle .more:hover i {
                                color: var(--ZhuTiSe);
                            }

                            .Table .Tables .TableBox .table_option .top .Ttitle .more i {
                                font-size: 20px;
                            }

                    .Table .Tables .TableBox .table_option .top .talbeInfo {
                        width: 100%;
                        height: 100px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                        .Table .Tables .TableBox .table_option .top .talbeInfo .icon {
                            width: 140px;
                            height: 100px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 60px;
                        }
                            .Table .Tables .TableBox .table_option .top .talbeInfo .icon img {
                                width:100px;
                                height:100px;
                            }
                            .Table .Tables .TableBox .table_option .top .talbeInfo .info {
                                width: calc(100% - 140px);
                                height: 100px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;
                            }

                            .Table .Tables .TableBox .table_option .top .talbeInfo .info .status {
                                width: 100%;
                                height: 40px;
                                display: flex;
                                justify-content: center;
                            }

                                .Table .Tables .TableBox .table_option .top .talbeInfo .info .status .titleName {
                                    width: 40%;
                                    height: 100%;
                                    display: flex;
                                    justify-content: flex-end;
                                    align-items: center;
                                }

                                .Table .Tables .TableBox .table_option .top .talbeInfo .info .status .statusName {
                                    width: 60%;
                                    height: 100%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }


                            .Table .Tables .TableBox .table_option .top .talbeInfo .info .Num {
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                height: 40px;
                            }

                                .Table .Tables .TableBox .table_option .top .talbeInfo .info .Num .titleName {
                                    width: 40%;
                                    height: 100%;
                                    display: flex;
                                    justify-content: flex-end;
                                    align-items: center;
                                }

                                .Table .Tables .TableBox .table_option .top .talbeInfo .info .Num .Renshu {
                                    width: 60%;
                                    height: 100%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }

                .Table .Tables .TableBox .table_option .bottom {
                    width: 100%;
                    height: 40px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }

                    .Table .Tables .TableBox .table_option .bottom .titlename {
                        width: 30%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .Table .Tables .TableBox .table_option .bottom .icon {
                        width: 40%;
                        height: 100%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                    }

                        .Table .Tables .TableBox .table_option .bottom .icon i {
                            margin: 2px;
                        }

                            .Table .Tables .TableBox .table_option .bottom .icon i.active {
                                color: var(--ZhuTiSe);
                            }

                    .Table .Tables .TableBox .table_option .bottom .FenQu {
                        width: 30%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                        .Table .Tables .TableBox .table_option .bottom .FenQu span {
                            margin: 5px;
                        }

            .Table .Tables .TableBox .addTable {
                width: 24%;
                height: 180px;
                background: #fff;
                float: left;
                border-radius: 3px;
                margin-top: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                color: var(--fontcolor);
                transition: 0.3s;
                float: left;
                margin-right: 1%;
            }
                .Table .Tables .TableBox .addTable:hover {
                    color:var(--ZhuTiSe);
                }
                .Table .Tables .TableBox .addTable i {
                    font-size: 80px;
                }
              